<template>
  <div class="publish-organ-list">
    <div class="organ-list-wrap">
      <div class="search">
        <el-form :inline="true" @submit.native.prevent>
            <el-form-item >
                <el-input size="small" v-model="searchInput" placeholder="请输入内容" @keyup.enter.native="handleSearch"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="handleSearch()">搜索</el-button>
            </el-form-item>
        </el-form>
      </div>
      <div class="btnArea">
            <el-button class="addButton" size="mini" icon="el-icon-document" @click="addClick">新增</el-button>
      </div>
      <div class="table-wrap">
        <el-table :data="tableData" class="table" v-loading="listLoading" border>
          <el-table-column label="ID" prop="id"         width="50"></el-table-column>
          <el-table-column label="机构名称" prop="name" width="400"></el-table-column>
          <el-table-column label="简称"                 width="300">
              <template slot-scope="scope">
                  <span v-for="short in scope.row.shortNameList" style="margin-right: 2px">{{short.name}};</span>
              </template>
          </el-table-column>
          <el-table-column label="效力级别" prop="level" width="200"></el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="deleteClick(scope.row.id)" type="text" size="small">删除</el-button>
              </template>
          </el-table-column>
        </el-table>
      </div>


      <div class="pagination">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getPublishList"
        />

      </div>

    </div>


      <el-dialog title="机构修改" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="form" size="small">
          <el-form-item label="机构名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off" style="width: 200px"></el-input>
          </el-form-item>

          <el-form-item label="简称" :label-width="formLabelWidth">
              <div v-for="(val,idx) in form.shortNameList" class="lineItem">
                  <el-input v-model="val.name" auto-complete="off" style="width: 200px"></el-input>
                  <el-button type="text" @click="shortname_del(idx)">删除</el-button>
              </div>
              <el-button @click="shortname_add()" type="primary" plain size="small">新增</el-button>
          </el-form-item>

          <el-form-item label="效力级别" :label-width="formLabelWidth">
            <el-select v-model="form.level" :value="form.level" placeholder="请选择" style="width: 200px">
              <el-option :label="level.label" :value="level.value" v-for="(level,idx) in levelList" :key="idx"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>

  </div>

</template>

<script>
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {getPublishList, editPublish, deletePublish} from '@/api/publish-data'

  export default {
    name: 'ExportExcel',
    components: {Pagination},
    data() {
      return {
        searchInput: '',
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 10
        },
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        form: {
          id: '',
          name: '',
          level: '',
          shortNameList: [],
        },
        levelList: [
          {label: '法律', value: '法律'},
          {label: '行政法规', value: '行政法规'},
          {label: '部门规章', value: '部门规章'},
          {label: '地方性法规', value: '地方性法规'},
          {label: '地方政府规章', value: '地方政府规章'},
          {label: '地方性规范文件', value: '地方性规范文件'},
        ]
      }
    },
    created() {
      this.getPublishList();
    },
    methods: {
      handleSearch() {
        this.listQuery.page = 1;
        this.getPublishList();
      },
      getPublishList() {
        this.listLoading = true;
        let param = {
          pageSize: this.listQuery.limit,
          pageNum: this.listQuery.page,
          key: this.searchInput,
        };
        getPublishList(param).then(res => {
          this.tableData = res.result.list;
          this.total = res.result.total;
          this.listLoading = false;
        })
      },
      addClick(){
        this.form.id = 0;
        this.form.name = '';
        this.form.level = '行政法规';
        this.form.shortNameList = [];
        this.dialogFormVisible = true;
      },
      editClick(row) {
        this.form.id = row.id;
        this.form.name = row.name;
        this.form.level = row.level;
        //this.form.shortNameList = row.shortNameList;
        this.form.shortNameList = row.shortNameList.map(val => { return {name:val.name, id:val.id}  });
        this.dialogFormVisible = true;
      },
      deleteClick(id) {
        this.listLoading = true;

        deletePublish({id: id}).then(res => {
            this.listLoading = false;
            this.$message({ message: "删除成功", type: "success" });
            this.getPublishList();
        }).catch(error => {
            this.listLoading = false;
            //reject(error)
        })
      },
      confirmClick() {
        //if (this.form.id) {

          if( !this.form.name ){  this.$message({ message: "请输入机构名称", type: "error"}); return; }
          if( !this.form.level ){  this.$message({ message: "请选择效力级别", type: "error"}); return; }

          this.form.shortNameList = this.form.shortNameList.filter(function(item) { return item.name.trim() != ''; });

          this.listLoading = true;
          let param = this.form;
          if( !param.id ){
                delete param.id;
          }
          editPublish(param).then(res => {
                this.getPublishList();
                this.listLoading = false;
                this.dialogFormVisible = false
          }).catch(error => {
                this.listLoading = false;
          })
        //}

      },

        /********** 简称 **********/
      shortname_add(){
        this.form.shortNameList.push( {name:''} );
      },
      shortname_del( idx ){
        this.form.shortNameList.splice( idx, 1 );
      },

    }
  }
</script>

<style lang="less" scoped>
  .publish-organ-list {
    padding-top: 36px;

    .organ-list-wrap {
      width: 90%;
      margin: auto;

      .search {
        width: 300px;
        display: flex;
        margin-bottom: 24px;
      }

      .btnArea{
          margin-bottom: 24px;
      }

      .table-wrap {
        width: 100%;

        .table {
        }
      }

      .pagination {
        margin-top: 24px;
      }

      .lineItem{
        margin-bottom: 5px;

        .el-button{
          margin-left:5px;
        }
      }


    }

  }
</style>
